<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    li {
        list-style: none;
    }
    
    .baidu {
        width:1008px;
        height: 182px;
        overflow: hidden;
        margin: 100px 250px;
        background-color: #fff;
        padding: 4px;
    }

    body {
        background: url() no-repeat center top;
    }

    .baidu li {
        float: left;
        margin: 0 1px;
        cursor: pointer;
    }

    img {
        width:250px;
        height: 180px;
    }


</style>
<body>
    <div class="baidu">
        <li><img src="img1.jpg" alt=""></li>
        <li><img src="img2.jpg" alt=""></li>
        <li><img src="img3.jpg" alt=""></li>
        <li><img src="img4.jpg" alt=""></li>
    </div>
    
    <script>
        //百度换肤案例分析：
        // 1，给4个小图片利用循环注册点击事件
        // 2，当我们点击了这个图片，让我们页面背景改为当前的图片
        // 3，核心算法：把当前图片的src路径取过来，给body做背景即可
        var imgs = document.querySelector('.baidu').querySelectorAll('img');
        for(var i = 0;i < imgs.length; i++){
            imgs[i].onclick = function(){
                //this.src 获取点击图片的路径
                document.body.style.backgroundImage = 'url('+ this.src +')';
            }
        }
    </script>
    
</body>
</html>